<!doctype html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
       <!-- Favicon -->
       <link rel="shortcut icon" th:href="@{/favicon.ico}" />
       <!-- Bootstrap CSS -->
       <link rel="stylesheet" th:href="@{/assets/admin/css/bootstrap.min.css}"/>
       <!-- Typography CSS -->
       <link rel="stylesheet" th:href="@{/assets/admin/css/typography.css}"/>
       <!-- Style CSS -->
       <link rel="stylesheet" th:href="@{/assets/admin/css/style.css}"/>
       <!-- Responsive CSS -->
       <link rel="stylesheet" th:href="@{/assets/admin/css/responsive.css}"/>
       <!--自定义的css-->
       <link rel="stylesheet" th:href="@{/assets/css/custom/custom.css}"/>
   </head>
   <body>
   <div id="content-page">
       <div class="container-fluid">
           <div class="row">
               <div class="col-lg-3">
                   <div class="iq-card">
                       <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                               <h4 class="card-title" th:text="#{admin.register.add}">Add New User</h4>
                           </div>
                       </div>
                       <div class="iq-card-body">
                           <form>
                               <div class="form-group">
                                   <div class="add-img-user profile-img-edit">
                                       <img class="profile-pic img-fluid" th:src="@{/assets/admin/images/user/11.png}" alt="profile-pic">
                                       <div class="p-image">
                                           <!-- <h5 class="upload-button">file upload</h5> -->
                                           <a href="javascript:void(0);" class="upload-button btn iq-bg-primary" th:text="#{admin.register.fileUpload}">File Upload</a>
                                           <input class="file-upload" type="file" accept="image/*">
                                       </div>
                                   </div>
                                   <div class="img-extension mt-3">
                                       <div class="d-inline-block align-items-center" th:if="#{flag} eq 'en'">
                                           <span>Only</span>
                                           <a href="javascript:void(0);">.jpg</a>
                                           <a href="javascript:void(0);">.png</a>
                                           <a href="javascript:void(0);">.jpeg</a>
                                           <span>allowed</span>
                                       </div>
                                       <div class="d-inline-block align-items-center" th:if="#{flag} eq 'zh'">
                                           <span>只允许</span>
                                           <a href="javascript:void(0);">.jpg</a>
                                           <a href="javascript:void(0);">.png</a>
                                           <a href="javascript:void(0);">.jpeg</a>
                                       </div>
                                   </div>
                               </div>
                              <!-- <div class="form-group">
                                   <label>User Role:</label>
                                   <select class="form-control" id="selectuserrole">
                                       <option>Select</option>
                                       <option>Web Designer</option>
                                       <option>Web Developer</option>
                                       <option>Tester</option>
                                       <option>Php Developer</option>
                                       <option>Ios Developer </option>
                                   </select>
                               </div>-->
                               <div class="form-group">
                                   <label for="furl" >qq</label>
                                   <input type="text" class="form-control" id="QQ" placeholder="qq">
                               </div>
                               <div class="form-group">
                                   <label for="furl" th:text="#{admin.register.fb}">Facebook Url:</label>
                                   <input type="text" class="form-control" id="furl" th:placeholder="#{admin.register.fb}">
                               </div>
                               <div class="form-group">
                                   <label for="turl" th:text="#{admin.register.t}">Twitter Url:</label>
                                   <input type="text" class="form-control" id="turl" th:placeholder="#{admin.register.t}">
                               </div>
                               <div class="form-group">
                                   <label for="instaurl" th:text="#{admin.register.insta}">Instagram Url:</label>
                                   <input type="text" class="form-control" id="instaurl" th:placeholder="#{admin.register.insta}">
                               </div>
                               <div class="form-group">
                                   <label for="lurl" th:text="#{admin.register.l}">Linkedin Url:</label>
                                   <input type="text" class="form-control" id="lurl" th:placeholder="#{admin.register.l}">
                               </div>
                           </form>
                       </div>
                   </div>
               </div>
               <div class="col-lg-9">
                   <div class="iq-card">
                       <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                               <h4 class="card-title" th:text="#{admin.register.userInfo}">New User Information</h4>
                           </div>
                       </div>
                       <div class="iq-card-body">
                           <div class="new-user-info">
                               <form>
                                   <div class="row">
                                       <div class="form-group col-md-6">
                                           <label for="fname" th:text="#{user.name}">First Name:</label>
                                           <input type="text" class="form-control" id="fname" th:placeholder="#{admin.user.name}">
                                       </div>
                                       <div class="form-group col-md-6">
                                           <label for="add1" th:text="#{user.adress}">Street Address:</label>
                                           <input type="text" class="form-control" id="add1" th:placeholder="#{user.adress}">
                                       </div>
                                       <div class="form-group col-md-12">
                                           <label for="cname" th:text="#{user.company}">Company Name:</label>
                                           <input type="text" class="form-control" id="cname" th:placeholder="#{user.company}">
                                       </div>
                                       <div class="form-group col-sm-12">
                                           <label th:text="#{user.country}">Country:</label>
                                           <select class="form-control" id="selectcountry">
                                               <option>Select Country</option>
                                               <option>Caneda</option>
                                               <option>Noida</option>
                                               <option >USA</option>
                                               <option>India</option>
                                               <option>Africa</option>
                                           </select>
                                       </div>
                                       <div class="form-group col-md-6">
                                           <label for="mobno" th:text="#{user.tel}">Mobile Number:</label>
                                           <input type="text" class="form-control" id="mobno" th:placeholder="#{user.tel}">
                                       </div>
                                       <div class="form-group col-md-6">
                                           <label for="altconno" th:text="#{user.altContact}">Alternate Contact:</label>
                                           <input type="text" class="form-control" id="altconno" th:placeholder="#{user.altContact}">
                                       </div>
                                       <div class="form-group col-md-6">
                                           <label for="email">Email:</label>
                                           <input type="email" class="form-control" id="email" placeholder="Email">
                                       </div>
                                       <div class="form-group col-md-6">
                                           <label for="pno" th:text="#{user.inviteCode}">Pin Code:</label>
                                           <input type="text" class="form-control" id="pno" th:placeholder="#{user.inviteCode}">
                                       </div>
                                       <div class="form-group col-md-12">
                                           <label for="city" th:text="#{user.city}">Town/City:</label>
                                           <input type="text" class="form-control" id="city" th:placeholder="#{user.city}">
                                       </div>
                                   </div>
                                   <hr>
                                   <h5 class="mb-3">Security</h5>
                                   <div class="row">
                                       <div class="form-group col-md-12">
                                           <label for="uname" th:text="#{user.username}">User Name:</label>
                                           <input type="text" class="form-control" id="uname" th:placeholder="#{user.username}">
                                       </div>
                                       <div class="form-group col-md-6">
                                           <label for="pass" th:text="#{user.password}">Password:</label>
                                           <input type="password" class="form-control" id="pass" th:placeholder="#{user.password}">
                                       </div>
                                       <div class="form-group col-md-6">
                                           <label for="rpass" th:text="#{user.rpassword}">Repeat Password:</label>
                                           <input type="password" class="form-control" id="rpass" th:placeholder="#{user.rpassword}">
                                       </div>
                                   </div>
                                   <div class="checkbox">
                                       <label><input class="mr-2" type="checkbox" >Enable Two-Factor-Authentication</label>
                                   </div>
                                   <button type="submit" class="btn btn-primary" th:text="#{admin.register.add}">Add New User</button>
                               </form>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
   <script th:src="@{/assets/admin/js/jquery.min.js}"></script>
   <script th:src="@{/assets/admin/js/popper.min.js}"></script>
   <script th:src="@{/assets/admin/js/bootstrap.min.js}"></script>
   <!-- Appear JavaScript -->
   <script th:src="@{/assets/admin/js/jquery.appear.js}"></script>
   <!-- Countdown JavaScript -->
   <script th:src="@{/assets/admin/js/countdown.min.js}"></script>
   <!-- Counterup JavaScript -->
   <script th:src="@{/assets/admin/js/waypoints.min.js}"></script>
   <script th:src="@{/assets/admin/js/jquery.counterup.min.js}"></script>
   <!-- Wow JavaScript -->
   <script th:src="@{/assets/admin/js/wow.min.js}"></script>
   <!-- Apexcharts JavaScript -->
   <script th:src="@{/assets/admin/js/apexcharts.js}"></script>
   <!-- Select2 JavaScript -->
   <script th:src="@{/assets/admin/js/select2.min.js}"></script>
   <!-- Owl Carousel JavaScript -->
   <script th:src="@{/assets/admin/js/owl.carousel.min.js}"></script>
   <!-- Magnific Popup JavaScript -->
   <script th:src="@{/assets/admin/js/jquery.magnific-popup.min.js}"></script>
   <!-- Smooth Scrollbar JavaScript -->
   <script th:src="@{/assets/admin/js/smooth-scrollbar.js}"></script>
   <!-- lottie JavaScript -->
   <script th:src="@{/assets/admin/js/lottie.js}"></script>
   <!-- Chart Custom JavaScript -->
   <script th:src="@{/assets/admin/js/chart-custom.js}"></script>
   <!-- Custom JavaScript -->
   <script th:src="@{/assets/admin/js/custom.js}"></script>
   </body>
</html>